<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components';
import VChart from "vue-echarts";
import { onMounted, ref } from 'vue'
import getRequest from '../utils/lxw_request';
import { useRouter } from "vue-router";

const props = defineProps(['isOpenModal'])
const emit = defineEmits(['update:isOpenModal'])

function closeModal() {
    emit('update:isOpenModal', false)
}




const scores_detail = [{ point: '1', scores: 98 }, { point: '2', scores: 98 }, { point: '3', scores: 98 }, { point: '4', scores: 98 }]

// chart
use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
]);

const chart_option = ref({
    title: {
        text: '成绩数据',
        top: '0px',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'horizontal',
        bottom: '20px',
        data: ['直接访问', '联盟广告', '搜索引擎'],
        icon: 'circle'
    },
    series: [
        {
            name: '成绩数据',
            type: 'pie',
            width: '100%',
            // height: '45%',
            left: 'center',
            label: {
                show: false
            },
            data: [
                {
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ]
        }
    ]
})


const score = ref(.0);
const comment = ref("");
const router = useRouter();

getScore();

function getScore() {
    const course_id = router.currentRoute.value.params['subject_id']

    getRequest(`/stu/course/${course_id}/score`, "GET", new Headers({ 'Content-Type': 'application/json' }))
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                score.value = json.data.score != undefined ? json.data.score : .0;
                comment.value = json.data.comment != undefined ? json.data.comment : "";
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}

</script>
<template>
    <div class="my-scores-modal" :class="{open: props.isOpenModal}" >
        <div class="content" >
            <div class="header" >
                <img src="/src/assets/images/student/close.svg" alt="Delete" @click="closeModal" />
            </div>
            <div class="main" >
                <div class="my-scores">
        <p>我的成绩</p>
        <div class="my-scores-content">
            <div class="content-left">
                <!-- <p>得分明细</p>
                <table>
                    <tr>
                        <th>任务点</th>
                        <th>得分</th>
                    </tr>
                    <tr v-for="(item, index) in scores_detail" :key="index">
                        <td>{{ item.point }}</td>
                        <td>{{ item.scores }}</td>
                    </tr>
                </table> -->
                <p>评价</p>
                <div class="evaluation">
                    {{ comment }}
                </div>
            </div>
            <div class="content-middle"><span></span></div>
            <div class="content-right">
                <p>总得分</p>
                <div class="total-scores">
                    {{ score }}
                </div>
                <!-- <p>可视化数据</p> -->
                <!-- <v-chart class="chart" :option="chart_option" /> -->
            </div>
        </div>

    </div>
            </div>
        </div>
    </div>
    


</template>
<style scoped>
.my-scores-modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 15;
}

.my-scores-modal.open {
    display: flex;
    justify-content: center;
    align-items: start;
}

.my-scores-modal>.content {
    width: 800px;
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px 50px;
    margin-top: 65px;
}

.my-scores-modal>.content>.header {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 30px;
}


.content>.header>img {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s;
}

.content>.header>img:hover {
    transform: rotate(90deg);
}

.my-scores p {
    font-family: Source Han Sans CN;
    font-size: 30px;
    font-weight: bold;
    color: #707070;
    margin-bottom: 10px;
}

.my-scores .my-scores-content {
    display: grid;
    grid-template-columns: 47% auto 47%;
    padding: 0 10px;
}

.my-scores .my-scores-content p {
    font-size: 24px;
}

.my-scores .my-scores-content p::after {
    content: ": "
}


.my-scores .my-scores-content .content-middle {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
}

.my-scores .my-scores-content .content-middle span {
    display: inline-block;
    width: 0;
    height: 105%;
    border-width: 0 1px 0 0;
    border-color: #707070;
    border-style: solid;
}

.my-scores .my-scores-content .content-left table {
    border-collapse: collapse;
    width: 200px;
    font-family: Source Han Sans CN;
    font-size: 18px;
    color: #707070;
    margin-bottom: 20px;
}

.my-scores .my-scores-content .content-left table th,
.my-scores .my-scores-content .content-left table td {
    text-align: center;
    border: 1px solid #707070;
    padding: 5px 0;
}

.my-scores .my-scores-content .content-left .evaluation {
    font-family: Source Han Sans CN;
    font-size: 16px;
    color: #707070;
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #707070;
    padding: 14px;
}

.my-scores .my-scores-content .content-right .total-scores {
    width: 80%;
    height: 77px;
    background-color: #dbdde3;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    line-height: 77px;
    font-size: 30px;
    text-align: center;

    font-family: Source Han Sans CN;
    font-size: 30px;
    font-weight: bold;
    color: #707070;
    margin-bottom: 20px;
}


.evaluation {
    height: 200px;
}



</style>